<template>
  <div class="searchB">
    <div class="top">
      <div class="search">
        <span class="iconfont icon-icon-7"></span>
        <input
          type="text"
          name="search"
          id=""
          :placeholder="hotwords"
          ref="input"
          v-model="text"
          required
          @keypress.enter="search"
        />
        <span v-show="delBtn" @click="delText">x</span>
      </div>
      <div class="btn" @click="$router.go(-1)">取消</div>
    </div>
    <!-- 大家都在搜 -->
    <div class="history" v-if="!show">
      <div class="tit">大家都在搜
        <span v-if="hot.length == 0">
          <van-loading size="0.5rem" type="spinner"/>
        </span>
      </div>
      <div class="content">
        <li v-for="(item, index) in hot" :key="index" @click="gotosea">
          {{ item }}
        </li>
      </div>
    </div>
    <!-- 搜索历史 -->
    <div class="history" v-if="!show">
      <div class="tit">
        搜索历史<span class="iconfont icon-shanchu" @click="clear">清空</span>
      </div>
      <div class="content">
        <li v-for="(item, index) in history" :key="index" @click="gotosea">
          {{ item }}
        </li>
      </div>
    </div>
    <!-- 搜索结果 -->
    <book-list v-if="show" :data="result">
      <template v-slot:header>
        <h3>搜索结果({{ result.length }})</h3>
      </template>
    </book-list>
    <!-- 没数据 -->
    <van-empty description="该类型小说暂无" v-if="result.length == 0 && show" />
    <van-overlay :show="overlay">
      <div class="wrapper">
        <van-loading type="spinner" color="#1989fa" />
      </div>
    </van-overlay>
  </div>
</template>

<script >
import { getHot, getHotwords, getSearch } from "../api/search/all.js";
export default {
  data() {
    return {
      text: "",
      delBtn: false,
      result: [], // 搜索结果
      show: false,
      hot: [], // 热门搜索结果
      hotwords: "", // 搜索热词
      overlay: false,
    };
  },
  methods: {
    delText() {
      this.text = "";
      this.$refs.input.focus();
    },
    clear() {
      this.$store.commit("setSeaHistory", { word: null, flag: false });
    },
    search() {
      if (this.text == "") {
        this.text = this.hotwords;
      }
      this.overlay = true;
      getSearch(this.text).then((data) => {
        if (data.ok) {
          this.result = data.books;
          console.log(data);
          this.overlay = false;
          this.show = true;
        }
      });
      // 添加搜索历史
      this.$store.commit("setSeaHistory", { word: this.text, flag: true });
    },
    gotosea(event) {
      // 点击搜索
      this.text = event.target.innerText;
      this.search();
    },
    toRouter(path, params) {
      this.$router.push({
        path: `/${path}`,
        query: { ...params },
      });
    },
    getData() {
      // 获取搜索热门
      getHot().then((data) => {
        if (data.ok) {
          this.hot = data.hotWords;
        }
      });
      // 获取搜索热词
      getHotwords().then((data) => {
        if (data.ok) {
          let length = data.searchHotWords.length;
          let ran = Math.floor(Math.random() * length);
          this.hotwords = data.searchHotWords[ran].word;
        }
      });
    },
  },
  watch: {
    text(da) {
      if (da == "") {
        this.show = false;
        this.delBtn = false;
      } else {
        this.delBtn = true;
      }
    },
  },
  computed: {
    history() {
      return this.$store.state.seahistory;
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.input.focus();
    });
  },
};
</script>

<style lang="less" scoped>
.searchB {
  height: 100%;
  background-color: white;
}
.top {
  display: flex;
  padding: 0.15625rem 0.46875rem;
  height: 0.859375rem;
  background-color: white;
  position: relative;
  .search {
    flex: 1;
    position: relative;
    font-size: 0;
    span {
      position: absolute;
      top: 50%;
      left: 0.15625rem;
      transform: translateY(-50%);
      font-size: 0.46875rem;
      &:nth-child(3) {
        width: 0.359375rem;
        height: 0.359375rem;
        line-height: 0.359375rem;
        color: white;
        background-color: #00000059;
        border-radius: 50%;
        font-size: 0.3125rem;
        text-align: center;
        right: 0.1875rem;
        left: auto;
      }
    }
    input {
      width: 100%;
      height: 100%;
      font-size: 0.390625rem;
      padding: 0 0.78125rem;
      box-sizing: border-box;
      border-color: transparent;
      border-radius: 0.078125rem;
      background-color: #f6f7f9;
      &:focus {
        border: 0.0625rem solid #e79f14;
      }
    }
  }
  .btn {
    flex: 0 0 1.25rem;
    font-size: 0.359375rem;
    text-align: right;
    line-height: 0.875rem;
  }
}
.history {
  .tit {
    font-size: 0.3125rem;
    color: #778;
    padding: 0.46875rem 0.46875rem 0.15625rem;
    background-color: #f7f7f7;
    span {
      float: right;
      font-size: 0.3125rem;
    }
  }
  .content {
    padding: 0.3125rem 0.46875rem 0.078125rem;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    li {
      font-size: 0.390625rem;
      color: #999;
      height: 0.65625rem;
      border-radius: 0.65625rem;
      line-height: 0.65625rem;
      padding: 0 0.234375rem;
      border: 1px solid #999;
      margin-right: 0.234375rem;
      margin-bottom: 0.234375rem;
      &:active {
        background-color: #f2f2f2;
      }
    }
  }
}
</style>